From 8b5272c1495bc4923c89013fe386a68e9297ae6b Mon Sep 17 00:00:00 2001 From: Factiven Date: Mon, 17 Apr 2023 20:40:08 +0700 Subject: update 1.0 --- pages/search/[param].js | 388 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 388 insertions(+) create mode 100644 pages/search/[param].js (limited to 'pages/search/[param].js') diff --git a/pages/search/[param].js b/pages/search/[param].js new file mode 100644 index 0000000..d7da1b4 --- /dev/null +++ b/pages/search/[param].js @@ -0,0 +1,388 @@ +import { useEffect, useRef, useState } from "react"; +import { AnimatePresence, motion as m } from "framer-motion"; +import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; +import { useRouter } from "next/router"; +import "react-loading-skeleton/dist/skeleton.css"; +import Link from "next/link"; +import Navbar from "../../components/navbar"; +import Head from "next/head"; +import Footer from "../../components/footer"; + +import { useAniList } from "../../lib/useAnilist"; + +const genre = [ + "Action", + "Adventure", + "Cars", + "Comedy", + "Drama", + "Fantasy", + "Horror", + "Mahou Shoujo", + "Mecha", + "Music", + "Mystery", + "Psychological", + "Romance", + "Sci-Fi", + "Slice of Life", + "Sports", + "Supernatural", + "Thriller", +]; + +const types = ["ANIME", "MANGA"]; + +const sorts = [ + "POPULARITY_DESC", + "POPULARITY", + "TRENDING_DESC", + "TRENDING", + "UPDATED_AT_DESC", + "UPDATED_AT", + "START_DATE_DESC", + "START_DATE", + "END_DATE_DESC", + "END_DATE", + "FAVOURITES_DESC", + "FAVOURITES", + "SCORE_DESC", + "SCORE", + "TITLE_ROMAJI_DESC", + "TITLE_ROMAJI", + "TITLE_ENGLISH_DESC", + "TITLE_ENGLISH", + "TITLE_NATIVE_DESC", + "TITLE_NATIVE", + "EPISODES_DESC", + "EPISODES", + "ID", + "ID_DESC", +]; + +export default function Card() { + const router = useRouter(); + + const { aniAdvanceSearch } = useAniList(); + + const [data, setData] = useState(); + const [loading, setLoading] = useState(true); + + let hasil = null; + let tipe = "ANIME"; + + const query = router.query; + if (query.param !== "anime" && query.param !== "manga") { + hasil = query.param; + } else if (query.param === "anime") { + hasil = null; + tipe = "ANIME"; + } else if (query.param === "manga") { + hasil = null; + tipe = "MANGA"; + } + // console.log(hasil); + + const [search, setQuery] = useState(hasil); + const [type, setSelectedType] = useState(tipe); + const [seasonYear, setSeasonYear] = useState(); + const [season, setSeason] = useState(); + const [genres, setSelectedGenre] = useState(); + const [perPage, setPerPage] = useState(25); + const [sort, setSelectedSort] = useState(["POPULARITY_DESC"]); + + const [isVisible, setIsVisible] = useState(false); + + const inputRef = useRef(null); + + async function advance() { + setLoading(true); + const data = await aniAdvanceSearch( + search, + type, + seasonYear, + season, + genres, + perPage, + sort + ); + setData(data); + setLoading(false); + } + + useEffect(() => { + advance(); + }, [search, type, seasonYear, season, genres, perPage, sort]); + + const handleKeyDown = async (event) => { + if (event.key === "Enter") { + event.preventDefault(); + const inputValue = event.target.value; + if (inputValue === "") { + setQuery(null); + } else { + setQuery(inputValue); + } + } + }; + + function trash() { + setQuery(null); + inputRef.current.value = ""; + setSelectedGenre(null); + setSelectedSort(["POPULARITY_DESC"]); + } + + function handleVisible() { + setIsVisible(!isVisible); + } + + function handleTipe(e) { + setSelectedType(e.target.value); + router.push(`/search/${e.target.value.toLowerCase()}`); + } + + // console.log(genres); + + return ( + <> + + Moopa - search + + +
+ +
+
+
+

+ TITLE +

+ +
+ + {/* TYPE */} +
+

TYPE

+ +
+ + {/* SORT */} +
+

SORT

+ +
+ + {/* OPTIONS */} +
+
+ + + +
+ + {/* TRASH ICON */} +
+ + + +
+
+
+
+ + {isVisible && ( + +
+

+ GENRE +

+ +
+
+

+ TYPE +

+ +
+ +
+

+ SORT +

+ +
+ + )} + +
+ +
+ {loading ? ( + <> + + {[1, 2, 4, 5, 6, 7, 8].map((item) => ( +
+ + +
+ ))} + + + ) : data && data.media.length === 0 ? ( +
+ Oops!

Nothing's Found... +
+ ) : ( + data.media.map((anime) => { + return ( + + +
+ + +

+ {anime.status === "RELEASING" ? ( + + ) : anime.status === "NOT_YET_RELEASED" ? ( + + ) : null} + {anime.title.userPreferred} +

+ +

+ {anime.format ||

-

} ·{" "} + {anime.status ||

-

} · {anime.episodes || 0}{" "} + Episodes +

+ + ); + }) + )} +
+ +
+
+ + ); +} -- cgit v1.2.3